<template>
    <div>
        <div style="margin: 20px 5px 10px 5px;padding: 5px">
            <el-button type="success" @click="openWindow('permissionChild',null)" icon="el-icon-plus">添加权限</el-button>
        </div>
        <div style="margin: 5px;padding: 5px">
            <el-table :height="550" v-loading="loading" size="mini" :header-cell-style="{background:'#67C23A',color:'white',fontSize:'15px'}" :data="permissionList" row-key="id" :tree-props="{children: 'children'}">
                <el-table-column type="index" align="center" width="80px"></el-table-column>
                <el-table-column label="权限名称" prop="name" >
                    <template slot-scope="scope">
                        <span :style="{'color': (scope.row.type == 1 && scope.row.pid == 0) ? '#67C23A' :(scope.row.type == 1 && scope.row.pid != 0) ? '#E6A23C' : ( scope.row.type == 2 ? '#F56C6C' : '#909399' ) }">{{scope.row.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="权限编码" prop="code" align="center">
                    <template slot-scope="scope">
                        <span :style="{'color': (scope.row.type == 1 && scope.row.pid == 0) ? '#67C23A' :(scope.row.type == 1 && scope.row.pid != 0) ? '#E6A23C' : ( scope.row.type == 2 ? '#F56C6C' : '#909399' ) }">{{scope.row.code}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="权限类型" align="center">
                    <tempate slot-scope="scope">
                        <el-tag :type="scope.row.type == '1' ? 'success' : (scope.row.type == '2' ? 'warning' : 'danger')" style="width: 100%;height: 100%;">
                            {{scope.row.type == '1' ? '菜单级权限' : (scope.row.type == '2' ? '按钮级权限' : 'API级权限')}}
                        </el-tag>
                    </tempate>
                </el-table-column>
                <el-table-column prop="enVisible" label="细粒度类型" align="center">
                    <tempate slot-scope="scope">
                        <el-tag :type="scope.row.enVisible == '1' ? 'info' : (scope.row.enVisible == '2' ? 'primary':(scope.row.enVisible == '3' ? 'success':(scope.row.enVisible == '4' ? 'warning' : 'danger')))" style="width: 100%;height: 100%;">
                            {{scope.row.enVisible == '1' ? '菜单' : (scope.row.enVisible == '2' ? '菜单':(scope.row.enVisible == '3' ? '菜单':(scope.row.enVisible == '4' ? '按钮' : 'API')))}}
                        </el-tag>
                    </tempate>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button plain @click="openWindow('permissionChild',scope.row)" :type="(scope.row.type == 1 && scope.row.pid == 0) ? 'success' :(scope.row.type == 1 && scope.row.pid != 0) ? 'warning' : ( scope.row.type == 2 ? 'danger' : 'info' ) " size="mini">
                            <span class="el-icon-edit"></span>修改
                        </el-button>

                        <el-button plain @click="remove(scope.row)" :type="(scope.row.type == 1 && scope.row.pid == 0) ? 'success' :(scope.row.type == 1 && scope.row.pid != 0) ? 'warning' : ( scope.row.type == 2 ? 'danger' : 'info' ) " size="mini">
                            <span class="el-icon-delete"></span>删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <permission-child ref="permissionChild"></permission-child>

    </div>
</template>

<script>

    import { all,remove } from '@/api/access/permission'

    export default {
        name: "permission-index",
        data(){
            return {
                loading:true,
                permissionList:[]
            }
        },
        components:{
            PermissionChild:()=> import ("@/views/access/permission-child.vue")
        },
        methods:{
            openWindow(name,data){
                if(data == null) {
                    this.$refs[name].data = {};
                } else {
                    this.$refs[name].tree = {expandedKeys:[],currentNodeKey:''};
                    this.$refs[name].data = data;
                }
                this.$refs[name].value = true;
            },
            findAll(){
                all().then(res=>{
                    this.permissionList = res.data.data;
                    this.loading = false;
                });
            },
            remove(data){
                //向下查看是否有子类 ,如果有则不可删除
                if(data.children && data.children.length > 0){
                    this.$message.error("有子类无法删除");
                    return false;
                }

                this.$confirm("确定要删除吗?","友情提示",{type:'warning'}).then(()=>{
                    remove({id:data.id}).then(res=>{
                        this.$message({
                            type:res.data.success?'success':'error',
                            message:res.data.message
                        });
                        this.findAll();
                    });
                });

            }
        },
        created(){
            this.findAll();
        }
    }
</script>

<style scoped>

</style>